<template>
  <el-form status-icon  label-width="100px" style="text-align: left;">
    <el-form-item label="支付凭证" >
      <el-upload
        action="http://192.168.1.120:8080/common/image"
        list-type="picture-card"
        :http-request="handleHttp"
        :limit="limit"
        :on-exceed="exceed"
        :multiple="multiple"
        :on-remove="handleRemove"
        :before-upload="beforeUpload"
        ref="uploadRef"
        accept="image/*">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible" size="tiny">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </el-form-item>
    <el-form-item class="btns_box">
      <el-button type="primary" @click="uploadVoucher">提交凭证</el-button>
      <el-button @click="closeVoucher">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import {FormItem, Button, Upload, Input, Dialog, Form} from 'element-ui'
  import {uploadPayVoucher, uploadImg} from '@/service/get-data'
  import {prefixImg} from '@/tool/index'
  export default {
    name: 'voucher',
    components: {
      elFormItem: FormItem,
      elButton: Button,
      elUpload: Upload,
      elInput: Input,
      elOption: Option,
      elDialog: Dialog,
      elForm: Form
    },
    props: {
      orderId: {
        type: String
      }
    },
    data () {
      return {
        limit: 5,
        multiple: true,
        dialogVisible: false,
        dialogImageUrl: '',
        // vouchers: '',
        voucherArr: [] // 凭证的imgpath,uid对象数组
      }
    },
    computed: {
      prefixImg () {
        return prefixImg
      },
      vouchers () {
        let arr = this.voucherArr
        let str = ''
        let len
        if (arr.length < 1) return
        arr.map((item, index) => {
          str += item.filePath + ','
        })
        len = str.length
        return str.substr(0, len - 1)
      }
    },
    methods: {
      handleRemove (file, fileList) {
        let uid = file.uid
        let index
        this.voucherArr.map((item, i) => {
          if (item === uid) {
            index = i
          }
        })
        this.voucherArr.splice(index, 1)
      },
      closeVoucher () {
        this.voucherArr = []
        // this.vouchers = ''
        this.$refs.uploadRef.clearFiles()
        this.$emit('close', true)
      },
      beforeUpload (file) {
        const reg = /^image\/+(JPEG|jpeg|JPG|jpg|png|PNG|gif)$/
        const isImg = reg.test(file.type)
        // const isLt2M = file.size / 1024 / 1024 < 2
        if (!isImg) {
          this.$message.error('上传图片只能是图片格式!')
        }
        // if (!isLt2M) {
        //   this.$message.error('上传图片大小不能超过 2MB!')
        // }
        return isImg
      },
      exceed (files, fileList) {
        this.$message({
          message: '最多上传5张图片',
          type: 'error'
        })
      },
      // 上传图片
      async handleHttp (file) {
        console.log(file)
        let uid = file.file.uid
        let obj = {}
        let param = new FormData()  // 创建form对象
        param.append('files', file.file, file.name)  // 通过append向form对象添加数据
        let res = await uploadImg(param)
        if (res.data.resultCode && res.data.resultCode === 2000) {
          res = res.data
          res.data.map((item, index) => {
            obj.uid = uid
            obj.filePath = item.filePath
          })
        }
        this.voucherArr.push(obj)
      },
      // 上传支付凭证
      async uploadVoucher () {
        if (!this.vouchers) {
          this.$message({message: '请上传支付凭证'})
          return
        }
        let res = await uploadPayVoucher(this.orderId, this.vouchers)
        if (res.data.resultCode && res.data.resultCode === 2000) {
          this.$message({
            message: '成功上传支付凭证,工作人员审核正在审核...',
            type: 'success'
          })

          this.closeVoucher()
        } else {
          this.$message({message: res.data.resultMes})
        }
      }
    }
  }
</script>

<style>

</style>
